<template>
  <div class="work">
    <div class="newItem">
      <div class="itemTitle">发展方向</div>
      <div class="situationsIntro">{{ majorData.employment_situations }}</div>
    </div>
    <div class="newItem">
      <div class="itemTitle">相关职业</div>
      <ul class="jobsList">
        <li v-for="(item, index) of jobsList" :key="index" class="jobsItem" @click="jumpInToJobDetail(item.job_title)">
          <div class="jobTitle">{{ item.job_title }}</div>
          <div class="jumpInToJobDetail">
            <i></i>
          </div>
        </li>
      </ul>
      <div class="watchMoreJobs" v-show="majorData.rel_jobs.length > 4" @click="handleWatchMoreJob(majorData.rel_jobs)">
        <span>查看更多</span>  
        <img src="~/static/images/com_icon_arrow_right_gray_32.png" alt="">
      </div>
    </div>
    <!-- <div class="newItem">
      <div class="itemTitle">薪资水平</div>
      <div class="salary">{{ majorData.salary_situations }}</div>
    </div> -->
  </div>  
</template>

<script>
import ls from 'store2'
export default {
  name: 'Work',
  props: {
    majorData: Object
  },
  data() {
    return {
      jobsList: []
    }
  },
  mounted() {
    if (this.majorData.rel_jobs.length > 4) {
      for (let i = 0; i < 4; i += 1) {
        this.jobsList.push(this.majorData.rel_jobs[i]);
      }
    } else {
      this.jobsList = this.majorData.rel_jobs
    }
  },
  methods: {
    // 查看更多
    handleWatchMoreJob(arr) {
      ls.set('workMsg', arr)
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.$router.push({
          path: '/professional/workList',
          query: {
            mini_token: this.commonJs.GetUrlParam('mini_token')
          }
        });
      } else {
        this.commonJs.gopush('/professional/workList')
      }
    },
    jumpInToJobDetail(jobTitle) {
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.$router.replace({
          path: '/professional/jobDetail',
          query: {
            type: jobTitle,
            mini_token: this.commonJs.GetUrlParam('mini_token')
          }
        });
      } else {
        this.goto('/professional/jobDetail', jobTitle)
      }
    },
    goto(routerName, queryData) {
      this.$router.replace({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
  .work {
    .newItem {
      padding-bottom: 0.48rem;
      border-bottom: 1px solid #E5E8ED;
      margin-bottom: 0.48rem;
      .itemTitle {
        color: #222;
        font-size: 0.3rem;
        font-weight: bold;
        line-height: 0.44rem;
        margin-bottom: 0.4rem;
      }
      .situationsIntro, .salary {
        color: #222;
        font-size: 0.28rem;
        line-height: 0.4rem;
      }
      .jobsList {
        padding-left: 0;
        list-style: none;
        background: #E5E8ED;
        margin-bottom: 0.32rem;
        .jobsItem {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 1.12rem;
          padding: 0 0.24rem;
        }
        .jobTitle {
          color: #222;
          font-size: 0.3rem;
        }
        .jumpInToJobDetail {
          width: 0.4rem;
          height: 0.4rem;
          i {
            width: 100%;
            height: 100%;
             display: inline-block;
          background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
          background-size:3rem 2.4rem;
          }
        }
      }
      .watchMoreJobs {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          color: #999999;
          font-size: 0.24rem;
          line-height: 0.33rem;
        }
        img {
          margin-left: 0.08rem;
          width: 0.32rem;
          height: 0.32rem;
        }
      }
    }
    .newItem:last-child {
      border-bottom: none;
    }
  }
</style>
